<template>
  <v-form ref="form">
    <v-card>
      <v-card-title>
        <v-row>
          <v-col cols="2" md="2">
            <v-select v-model="qishu" :items="items" label="纳税期数" @change="itemChange"></v-select>
          </v-col>
        </v-row>
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="12">
            <v-card max-height="auto">
              <v-card-title>薪酬小计</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="3" md="3">
                      <v-text-field label="基本收入合计" :value="inSum" dense readonly outlined ></v-text-field>
                    </v-col>
                    <v-col cols="3" md="3">
                      <v-text-field label="税项扣除合计" :value="kouSum" dense readonly outlined></v-text-field>
                    </v-col>
                    <v-col cols="3" md="3">
                      <v-text-field label="附加扣除项合计" :value="outSum" dense readonly outlined></v-text-field>
                    </v-col>
                    <v-col cols="3" md="3">
                      <v-text-field label="税后收入合计" :value="afterSum" dense readonly outlined></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>基本薪酬</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="4" md="4">
                      <v-text-field label="基本工资" v-model="payBasicForm.basePay" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="浮动报酬"
                        v-model="payBasicForm.floatingPay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="福利补贴"
                        v-model="payBasicForm.welfareSubsidy"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="职业资格补贴"
                        v-model="payBasicForm.practisingPay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="职称津贴"
                        v-model="payBasicForm.titlePay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="考勤奖"
                        v-model="payBasicForm.attendPay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="特殊人才"
                        v-model="payBasicForm.talentsPay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="综合奖励"
                        v-model="payBasicForm.compreAward"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="房屋补贴"
                        v-model="payBasicForm.housingSubsidy"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="工龄工资"
                        v-model="payBasicForm.seniorityPay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field label="交通补贴" v-model="payBasicForm.traffic" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="青年才俊津贴"
                        v-model="payBasicForm.youngTalent"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="通信费补贴"
                        v-model="payBasicForm.communication"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="加班费"
                        v-model="payBasicForm.overTimePay"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="其他税前应发"
                        v-model="payBasicForm.taxBeforeOther"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="其他税后应发"
                        v-model="payBasicForm.taxAfterOther"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>税项扣除</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="4" md="4">
                      <v-text-field label="个人所得税" :value="individualTax" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field label="个人养老金" :value="pension" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field label="个人住房公积金" :value="housingFund" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field label="个人失业保险金" :value="unemploymentFund" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field label="个人医疗保险金" :value="medicalFund" type="number" dense></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="房租"
                        v-model="payBasicForm.rentDeduction"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="党费"
                        v-model="payBasicForm.membership"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="其他税前扣款"
                        v-model="payBasicForm.otherTax"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="各类扣款"
                        v-model="payBasicForm.typesDeduction"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="扣除捐赠款"
                        v-model="payBasicForm.donation"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>保险缴纳</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="个人养老保险基数"
                        v-model="payBasicForm.pensionBase"
                        type="number"
                        dense
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="个人养老保险公司比例"
                        v-model="payBasicForm.pensionCompanyRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="个人养老保险个人比例"
                        v-model="payBasicForm.pensionPersonalRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="失业保险基数"
                        v-model="payBasicForm.unemploymentBase"
                        type="number"
                        dense
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="失业保险公司比例"
                        v-model="payBasicForm.unemploymentCompanyRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="失业保险个人比例"
                        v-model="payBasicForm.unemploymentPersonalRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="医疗保险基数"
                        v-model="payBasicForm.medicalBase"
                        type="number"
                        dense
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="医疗保险公司比例"
                        v-model="payBasicForm.medicalCompanyRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="医疗保险个人比例"
                        v-model="payBasicForm.medicalPersonalRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="住房公积金基数"
                        v-model="payBasicForm.housingBase"
                        type="number"
                        dense
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="住房公积金公司比例"
                        v-model="payBasicForm.housingCompanyRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="住房公积金个人比例"
                        v-model="payBasicForm.housingPersonalRatio"
                        type="number"
                        dense
                        outlined
                        prefix="%"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="6" md="6">
            <v-card max-height="auto" v-if="expandFlag">
              <v-card-title>专项附加扣除</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="住房贷款支出"
                        v-model="payBasicForm.housingLoanExpend"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="子女教育支出"
                        v-model="payBasicForm.childrenExpend"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="赡养老人支出"
                        v-model="payBasicForm.elderlyExpend"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="继续教育支出"
                        v-model="payBasicForm.educationExpend"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                    <v-col cols="4" md="4">
                      <v-text-field
                        label="房租支出"
                        v-model="payBasicForm.rentExpend"
                        type="number"
                        dense
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-form>
</template>

<script>
export default {
  props: ["payBasicForm", "expandFlag"],
  data() {
    return {
      rates: {
        taxRate: 3,
        deductions: 5000,
        quickDeductions: 0
      },
      beforeRates: {},
      qishu: 1,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      num: 0
    };
  },
  methods: {
    setForm() {
      this.payBasicForm.housingFund = this.housingFund;
      this.payBasicForm.unemploymentFund = this.unemploymentFund;
      this.payBasicForm.medicalFund = this.medicalFund;
      this.payBasicForm.pension = this.pension;
      this.payBasicForm.individualTax = parseFloat(this.individualTax);
    },
    getBeforeRates(sumIn) {
      this.axios.get("/salaryNew/getRates/" + sumIn).then(response => {
        if (response.data.data.id !== "") {
          this.beforeRates = response.data.data;
        } else {
        }
      });
    },
    getRates() {
      var sumIn =
        this.inSum * this.qishu -
        this.kouSum * this.qishu -
        this.outSum * this.qishu -
        this.rates.deductions * this.qishu;

      this.axios.get("/salaryNew/getRates/" + sumIn).then(response => {
        if (response.data.data.id !== "") {
          this.rates = response.data.data;
        } else {
        }
      });
    },
    itemChange(item) {
      this.getRates();
      this.getBeforeRates(
        this.inSum * (this.qishu - 1) -
          this.kouSum * (this.qishu - 1) -
          this.outSum * (this.qishu - 1) -
          5000 * (this.qishu - 1)
      );
    }
  },
  created() {
    this.getRates();
  },
  mounted() {},
  computed: {
    inSum() {
      return (
        parseFloat(this.payBasicForm.basePay) +
        parseFloat(this.payBasicForm.floatingPay) +
        parseFloat(this.payBasicForm.compreAward) +
        parseFloat(this.payBasicForm.practisingPay) +
        parseFloat(this.payBasicForm.titlePay) +
        parseFloat(this.payBasicForm.welfareSubsidy) +
        parseFloat(this.payBasicForm.housingSubsidy) +
        parseFloat(this.payBasicForm.seniorityPay) +
        parseFloat(this.payBasicForm.attendPay) +
        parseFloat(this.payBasicForm.talentsPay) +
        parseFloat(this.payBasicForm.traffic) +
        parseFloat(this.payBasicForm.taxBeforeOther) +
        parseFloat(this.payBasicForm.taxAfterOther) +
        parseFloat(this.payBasicForm.youngTalent) +
        parseFloat(this.payBasicForm.communication) +
        parseFloat(this.payBasicForm.overTimePay)
      );
    },
    kouSum() {
      return (
        parseFloat(this.pension) +
        parseFloat(this.housingFund) +
        parseFloat(this.unemploymentFund) +
        parseFloat(this.medicalFund) +
        parseFloat(this.payBasicForm.otherTax) +
        parseFloat(this.payBasicForm.typesDeduction) +
        parseFloat(this.payBasicForm.donation) +
        parseFloat(this.payBasicForm.rentDeduction) +
        parseFloat(this.payBasicForm.membership)
      );
    },
    outSum() {
      return (
        parseFloat(this.payBasicForm.childrenExpend) +
        parseFloat(this.payBasicForm.rentExpend) +
        parseFloat(this.payBasicForm.housingLoanExpend) +
        parseFloat(this.payBasicForm.elderlyExpend) +
        parseFloat(this.payBasicForm.educationExpend)
      );
    },

    afterSum() {
      return (
        parseFloat(this.inSum) -
        parseFloat(this.kouSum) -
        parseFloat(this.individualTax)
      );
    },
    individualTax() {
      if (this.qishu == 1) {
        this.num =
          (this.inSum - this.kouSum - this.outSum - this.rates.deductions) *
            (this.rates.taxRate / 100) -
          this.rates.quickDeductions;
        if (this.num < 0) this.num = 0;
        return this.num.toFixed(2);
      } else {
        this.num =
          (this.inSum * this.qishu -
            this.kouSum * this.qishu -
            this.outSum * this.qishu -
            this.rates.deductions * this.qishu) *
            (this.rates.taxRate / 100) -
          this.rates.quickDeductions -
          ((this.inSum * (this.qishu - 1) -
            this.kouSum * (this.qishu - 1) -
            this.outSum * (this.qishu - 1) -
            this.beforeRates.deductions * (this.qishu - 1)) *
            (this.beforeRates.taxRate / 100) -
            this.beforeRates.quickDeductions);
        if (this.num < 0) this.num = 0;
        return this.num.toFixed(2);
      }

      //return ((this.inSum*this.qishu - this.kouSum*this.qishu - this.outSum*this.qishu - this.rates.deductions*this.qishu) * (this.rates.taxRate/100))-this.rates.quickDeductions-this.thisRate;
    },

    pension() {
      return (
        (parseFloat(this.payBasicForm.pensionBase) *
          parseFloat(this.payBasicForm.pensionPersonalRatio)) /
        100
      );
    },
    housingFund() {
      return (
        (parseFloat(this.payBasicForm.housingBase) *
          parseFloat(this.payBasicForm.housingPersonalRatio)) /
        100
      );
    },
    unemploymentFund() {
      return (
        (parseFloat(this.payBasicForm.unemploymentBase) *
          parseFloat(this.payBasicForm.unemploymentPersonalRatio)) /
        100
      );
    },
    medicalFund() {
      return (
        (parseFloat(this.payBasicForm.medicalBase) *
          parseFloat(this.payBasicForm.medicalPersonalRatio)) /
        100
      );
    }
  }
};
</script>